.mine{
  width:100%;
  height:auto;
  background-color: #EEEEEE;
  .banner{
    width:100%;
    height:13rem;
    background: url(../img/banner.png) no-repeat;
    background-size: 100% 100%;
    padding: 1.6rem 1.5rem;
    span{
      width:100%;
      display: inline-block;
      text-align: right;
      color: #fff;
      font-size: 1.75rem;
    }
  }
  .xiaoxi{
    width:100%;
    height: 4.4rem;
    line-height: 4.4rem;
    display: flex;padding: 0 0.5rem;
    justify-content: space-between;
    background-color: white;
    margin-bottom: 1.2rem;
    span:nth-of-type(1){
      position: relative;
      font-size: 1.35rem;
      .font{
        color: #7A7A7A;
      }
      .num{
        position: absolute;
        top:0.75rem;
        left:6.7rem;
        color: #fff;
        width:1.5rem;
        height:1.5rem;
        text-align: center;
        line-height: 1.5rem;
        background-color: red;
        font-size: 0.7rem;
        display: inline-block;
        border-radius: 50%;
      }
    }
  }

  .article{
    width: 100%;
    background-color: white;
    .like{
      display: flex;
      div{
        height: 4rem;
        line-height: 4rem;
        flex: 1;
        text-align: center;
        border: 1px solid #DDDDDD;
        font-size:1.5rem;
        &:hover{
          border-bottom:1px solid #f24046;
        }
      }
    }
    .list{
      width: 100%;
      ul{
        width: 100%;
        li{
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 1rem;
          border-bottom: 1px solid #DDDDDD;
          .name{
            display: flex;
            img{
              width: 5rem;
              height: 5rem;
              margin-right: 1rem;
            }
            h3{
              font-size: 1.3rem;
            }
          }
          i{
            font-size: 3rem;
            margin-top: 1rem;
          }
        }
      }
      ul:nth-child(2){
        display: none;
      }
    }
  }

}